<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:f="http://java.sun.com/jsf/core">


    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
        <link href="./resources/css/meucss.css" rel="stylesheet" type="text/css" />
        <link rel="shortcut icon" href="./resources/images/lamp.png" type="image/icon"/>
        <title>Victor Hugo</title>
    </h:head>

    <h:body>
        <div id="blog-pager" >

            <p:layout style="position: relative; margin: auto; width:850px; height: 950px " >
                <p:layoutUnit  id="top-layout-color" position="north" size="150">
                    <div id="topo">

                    </div>
                </p:layoutUnit>

                <p:layoutUnit position="east" size="200" >

                    <h:form>

                        <p:dataList  value="#{linkBean.categorias}" var="cat" type="definition" >
                            <p:commandLink value="#{cat.descricao}" title="#{cat.dataCriacao}" />

                            <f:facet name="description">  
                                <p:graphicImage value="/images/cars/#{cat.icon}.jpg"/>   
                            </f:facet>  
                        </p:dataList>

                        <ui:insert name="left">right</ui:insert>
                    </h:form>                     
                </p:layoutUnit>



                <p:layoutUnit  position="center">
                    <h:form>

                        <p:growl id="messages"/>

                        <p:menubar autoSubmenuDisplay="true">

                            <p:menuitem value="Início" url="http://www.primefaces.org" icon="ui-icon ui-icon-close" />
                            <p:menuitem value="Sobre" url="http://www.primefaces.org" icon="ui-icon ui-icon-close" />
                            <p:menuitem value="Fale comigo" url="http://www.primefaces.org" icon="ui-icon ui-icon-close" />
                        </p:menubar>



                        <ui:insert name="content">Content</ui:insert>
                    </h:form>
                </p:layoutUnit>

            </p:layout>
        </div>
    </h:body>

</html>
